.header_container { //主容器

  display: flex;

  flex-direction: row;

  width: 100%;

  height: 100%;

  background: #fff none repeat scroll 0 0;

  justify-content: flex-end;

  //顶部左侧logo
  .logo {
    flex: 1 0 auto;
    width: 20%;
    display: flex;
    flex-direction: row;

    //logo图片
    #logoImg {
      flex: 0 1 auto;
      height: 100%;
      width: 30%;
      background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVCLmpgNbyyaRLJXlbNPjY7E5J35k5IzDMSjxXjzPhOn3m5H5EmA");
      background-size: 100% 100%;
    }

    //logo旁边的文字
    #name {
      flex: 0 1 auto;
      height: 100%;
      line-height: 100%;
      align-self: center;
      display: flex;
      flex-direction: column;
      justify-content: center;

      span {
        font-size: 1.5rem;
      }
    }
  }

  .search {
    flex: 1 0 auto;
  }

  .menu {
    flex: 1 0 auto;

    justify-content: space-between;

    /*复写原有的Menu样式*/
    ul.ant-menu {
      height: 100%;

      li.ant-menu-item {
        height: 100%;
        font-size: 1.5em;
        flex: 0 0 auto;
        justify-content: center;
        padding-top: 3%;

        span{
          margin-right: 10px;
        }
      }

      li.ant-menu-submenu {

        @extend li.ant-menu-item; //复用子元素样式

      }

    }

  }
  .user {
    flex: 0 0 auto;
    display: flex;
    margin-right: 15px;
    .avatar {
      vertical-align: middle;
      font-size: 25px;
      margin-top: 20%;
      i {
        color: black !important;
      }
    }
    .info {
      font-size: 10px;
      margin-top: 15%;
      margin-left: 10px;
    }
    .logout{
      vertical-align: middle;
      font-size: 25px;
      margin-top: 15%;
      margin-left: 10px;
    }
  }
}